<template>
  <div class="play-disco">
    <div class="disco">
      <img
        :class="{ paused: paused }"
        :src="
          (song?.al?.picUrl || song?.album?.picUrl) +
          '?imageView&thumbnail=360y360&quality=75&tostatic=0'
        "
        alt=""
      />
    </div>
  </div>
</template>

<script>
export default {
  props: ["song", "paused"],

  data() {
    return {};
  },

  components: {},

  computed: {},

  methods: {},
};
</script>
<style lang='scss' scoped>
@keyframes revolve {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.play-disco {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100vw;
  height: 100%;
  padding-right: 10px;

  .disco {
    width: 70vw;
    height: 70vw;
    margin-bottom: 15vw;

    border: 10vw solid #000;
    border-radius: 50%;
    box-sizing: border-box;

    background-color: #000;

    overflow: hidden;

    img {
      width: 100%;
      animation: revolve 8s linear infinite;

      &.paused {
        animation-play-state: paused;
      }
    }
  }
}
</style>